<template>
  <el-dialog title="添加楼栋"
             :close-on-click-modal="false"
             :visible.sync="dialogShow"
             width="700px"
             :before-close="handleClose">
    <el-select v-model="dialogForm.schoolAreaId"
               placeholder="--校区--"
               @change="cascade('campus')"
               size="small">
      <el-option v-for="(item, index) in campus"
                 :key="index"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="dialogForm.campusId"
               placeholder="--园区--"
               @change="cascade('gardens')"
               size="small">
      <el-option v-for="(item, index) in gardens"
                 :key="index"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="dialogForm.buildingId"
               placeholder="--楼栋--"
               size="small">
      <el-option v-for="(item, index) in buildings"
                 :key="index"
                 :label="item.number + '-' + item.unitNumber"
                 :value="item.id">
      </el-option>
    </el-select>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="handleClose"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 @click="sure"
                 size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  listSchoolAreaByUserUsingGET,
  listCampusBySchoolAreaIdAndUserUsingGET,
  listBuildingByCampusIdAndUserUsingGET,
  addBuildingToCollegeUsingPOST
} from '@api/auto'
export default {
  props: {
    dialogShow: Boolean,
    collegeId: Number,
    tabData: Array
  },
  data () {
    return {
      dialogForm: {
        schoolAreaId: null,
        campusId: null,
        buildingId: null
      },
      campus: [],
      gardens: [],
      buildings: [],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 校区change
      changeCampus () {
        this.dialogForm.campusId = ''
        this.dialogForm.buildingId = ''
        this.listCampusBySchoolAreaIdAndUserUsingGET(this.dialogForm.schoolAreaId)
      },
      // 园区change
      changeGardens () {
        this.dialogForm.buildingId = ''
        this.listBuildingByCampusIdAndUserUsingGET(this.dialogForm.campusId)
      }
    }
  },
  created () {
    this.listSchoolAreaByUserUsingGET()
  },
  methods: {
    handleClose () {
      this.dialogForm = {
        schoolAreaId: null,
        campusId: null,
        buildingId: null
      }
      this.$emit('handleClose')
    },
    sure () {
      if (!this.dialogForm.schoolAreaId || !this.dialogForm.campusId || !this.dialogForm.buildingId) {
        this.$message.error('请选择完整')
      } else if (this.tabData.some(item => {
        return item.buildingId === this.dialogForm.buildingId
      })) {
        this.$message.error('不能重复添加楼栋')
      } else {
        this.addBuildingToCollegeUsingPOST()
      }
    },
    placeChange (val) {
      console.log(val, 'place')
    },
    // 获取所有校区
    listSchoolAreaByUserUsingGET () {
      listSchoolAreaByUserUsingGET().then(res => {
        this.campus = res.data
      })
    },
    // 根据登陆用户查询指定校区下的园区
    listCampusBySchoolAreaIdAndUserUsingGET (id) {
      listCampusBySchoolAreaIdAndUserUsingGET(id).then(res => {
        this.gardens = res.data
      })
    },
    // 根据园区id和登陆用户查询管辖的楼栋
    listBuildingByCampusIdAndUserUsingGET (id) {
      listBuildingByCampusIdAndUserUsingGET(id).then(res => {
        this.buildings = res.data
      })
    },
    // 学院分管-为学院新增楼栋
    addBuildingToCollegeUsingPOST () {
      let body = {
        ...this.dialogForm,
        collegeId: this.collegeId
      }
      addBuildingToCollegeUsingPOST(body).then(res => {
        this.handleClose()
        this.$emit('sure')
        this.$message.success('新增成功')
      })
    }
  }
}
</script>
